import { lazyBatchReport } from '../report/index'

/**
 * 统计和计算lcp: Largest Contentful Paint
 * LCP: 最大内容绘制时间
 * 用于记录视口内最大的内容元素（如图片或文本块）完全渲染的时间
 * LCP 通常用于衡量用户感知的主要内容加载速度，关注的是页面上最显眼的元素
 */
export default function observerLCP() {
  const entryHandler = (list) => {
    if (observer) {
      observer.disconnect()
    }
    for (const entry of list.getEntries()) {
      const json = entry.toJSON()

      const reportData = {
        ...json,
        type: 'performance',
        subType: entry.name,
        pageUrl: window.location.href,
      }

      // 数据上报
      lazyBatchReport(reportData)
    }
  }

  const observer = new PerformanceObserver(entryHandler)

  // 监听paint类型的性能事件，buffered 为 true 表示确保观察到所有的paint事件
  observer.observe({ type: 'largest-contentful-paint', buffered: true })
}
